<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">Charts-line</view>
			<view class="tui-page__desc">折线图表</view>
		</view>
		<view class="tui-page__bd">
			<view class="tui-title">2021年上半年月份商品营业额（单位：w）</view>
			<view class="tui-charts-box">
				<tui-charts-line ref="tui_line_1" tooltip :xAxis="options1.xAxis" :dataset="options1.dataset"
					:max="options1.max" :splitNumber="options1.splitNumber" @click="dotClick"></tui-charts-line>
			</view>
			<view class="tui-title">各部门计划完成情况</view>
			<view class="tui-charts-box">
				<tui-charts-line ref="tui_line_2" tooltip :xAxis="options2.xAxis" :dataset="options2.dataset"
					:max="options2.max" :splitNumber="options2.splitNumber" :xAxisVal="options2.xAxisVal"
					:legend="options2.legend" :yAxisSplitLine="options2.yAxisSplitLine">
				</tui-charts-line>
			</view>
			<view class="tui-title">实时空气质量</view>
			<view class="tui-charts-box">
				<tui-charts-line ref="tui_line_3" scrollable tooltip :xAxis="options3.xAxis" :yAxis="options3.yAxis"
					:dataset="options3.dataset" :max="options3.max" :splitNumber="options3.splitNumber"
					:xAxisLine="options3.xAxisLine" :yAxisLabel="options3.yAxisLabel" :xAxisVal="options3.xAxisVal"
					:brokenDot="options3.brokenDot">
				</tui-charts-line>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				options1: {
					xAxis: ['一月', '二月', '三月', '四月', '五月', '六月'],
					dataset: [{
						name: '营业额',
						color: '#5677fc',
						source: [380, 210, 320, 160, 300, 200]
					}],
					max: 600,
					splitNumber: 100
				},
				options2: {
					legend: {
						show: true
					},
					xAxis: ['管理部', '销售部', '采购部', '生产部', '财务部'],
					dataset: [{
						name: '计划',
						color: '#07c160',
						source: [25, 40, 40, 45, 30]
					}, {
						name: '实际',
						color: '#ff7900',
						source: [15, 30, 20, 50, 30]
					}],
					max: 50,
					splitNumber: 10,
					xAxisVal: {
						show: false,
						height: 20
					},
					yAxisSplitLine: {
						color: '#e3e3e3'
					}
				},
				options3: {
					xAxis: ['1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00',
						'12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00',
						'22:00', '23:00', '00:00'
					],
					yAxis: [{
						value: ''
					}, {
						value: '优',
						color: '#477100'
					}, {
						value: '良',
						color: '#8ab54c'
					}, {
						value: '轻',
						color: '#f9bd4b'
					}, {
						value: '中',
						color: '#f17305'
					}, {
						value: '重',
						color: '#c01c1d'
					}],
					yAxisLabel: {
						show: true
					},
					dataset: [{
						name: 'PM2.5',
						color: '#f74d54',
						source: [1.2, 1.8, 2.6, 3.6, 4.2, 3, 4, 3, 4, 5, 6, 9, 8, 7, 4, 2, 3, 5, 6, 4, 2, 3, 3, 4]
					}],
					xAxisLine: {
						color: '#e3e3e3',
						itemGap: 120
					},
					xAxisVal: {
						show: true,
						color: "#f74d54"
					},
					brokenDot: {
						color: '#f74d54'
					},
					max: 10,
					splitNumber: 2
				}
			}
		},
		onReady() {
			this.$refs.tui_line_1.draw(this.options1.dataset)
			this.$refs.tui_line_2.draw(this.options2.dataset)
			this.$refs.tui_line_3.draw(this.options3.dataset)
		},
		methods: {
			dotClick(e) {
				console.log(e)
			}
		}
	}
</script>

<style>
	.tui-title {
		width: 100%;
		font-size: 28rpx;
		color: #888;
		padding: 30rpx 0;
		box-sizing: border-box;
		text-align: center;
	}

	.tui-charts-box {
		width: 100%;
		display: flex;
		justify-content: center;
	}
</style>
